<template>
  <div>
    <div>
      <a-popover position="bl" trigger="click">
        <a-button>{{ t["新增"] }}</a-button>
        <template #content>
          <div>
            <common-upload
              class="min-w-[200px]"
              directory
              multiple
              @success="success"
              accept=".ttf"
            />
          </div>
        </template>
      </a-popover>
      <a-button @click="getList" type="text"> {{ t["刷新"] }} </a-button>
    </div>
    <a-divider />
    <a-table
      :pagination="{
        pageSize: query.pageSize,
        current: query.pageNum,
        total: query.total
      }"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :loading="tableData.loading"
      :columns="translateColumns(columns)"
      :data="tableData.data"
      table-layout-fixed
    >
      <template #optional="{ record }">
        <x-delete @ok="del(record)"> {{ t["删除"] }} </x-delete>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { deleteFont, font, queryFont } from "@/api/service/font/font";
import { Font } from "@/api/service/font/types";

import { FileItem, Message } from "@arco-design/web-vue";

import { columns } from "./columns";

const tableData = useTable<Font>();

const query = useQuery();

const t = translate("公共模块");

function pageChange(index: number) {
  query.value.pageNum = index;
  getList();
}

const pageSizeChange = (size: number) => {
  query.value.pageSize = size;
};
const getList = async () => {
  tableData.value.loading = true;
  const res = await queryFont(query.value);
  tableData.value.data = res.rows;
  query.value.total = res.total;
  tableData.value.loading = false;
};
const success = async (payload: FileItem) => {
  const { data } = payload.response;
  await font({
    name: payload.name,
    path: data
  });
  getList();
  Message.success("Success");
};

const del = async (record: any) => {
  const result = await deleteFont(record.id);
  getList();
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>
